import styles from './common.module.scss'
import {Empty, Spin, Typography} from "antd";
import {QuestionCard} from "../../components/QuestionCard";
import {useTitle} from "ahooks";
import {ListSearch} from "../../components/ListSearch";
import useLoadQuestionListData from "../../hooks/useLoadQuestionListData";
import {ListPage} from "../../components/ListPage";

const {Title} = Typography
export function Star() {
    useTitle('小慕问卷 - 星标问卷')
    const {data = {}, loading} = useLoadQuestionListData({isStar: true})
    const {list = [], total = 0} = data;
    return (
        <>
            <div className={styles.header}>
                <div className={styles.left}>
                    <Title level={3}>星标问卷</Title>
                </div>
                <div className={styles.right}>
                    <ListSearch></ListSearch>
                </div>
            </div>
            <div className={styles.content}>
                {loading && (<div style={{textAlign: 'center'}}><Spin></Spin></div>)}
                {!loading && list.length === 0 && <Empty description={'暂无数据'}/>}
                {list.length > 0 && list.map((q: any) => {
                    const {_id} = q
                    return <QuestionCard {...q} key={_id}/>
                })}
            </div>
            <div className={styles.footer}>
                <ListPage total={total}></ListPage>
            </div>
        </>
    );
}